<template>
	<view class="plan">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">工作规划</view>
			</view>
		</u-navbar>
		<!--  -->
		<view v-if="type == 1">
			<view @click="show = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">工作意向</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<text style="font-size: 28rpx; color: #333333">{{ userInfo.workIntention }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
			</view>
			<view @click="show1 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">期望收入</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<text style="font-size: 28rpx; color: #333333">{{ userInfo.income }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<u-picker :show="show1" :columns="columns1" @confirm="confirm1" @cancel="show1 = false"></u-picker>
			</view>
			<view @click="show2 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">期望工作时间</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<text style="font-size: 28rpx; color: #333333">{{ userInfo.workTime }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<u-picker :show="show2" :columns="columns2" @confirm="confirm2" @cancel="show2 = false"></u-picker>
			</view>
			<view @click="addressShow = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">期望工作地点</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<text style="font-size: 28rpx; color: #333333">{{ userInfo.workAddress }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<address-picker
					:show="addressShow"
					@confirm="confirmAddress"
					@cancel="addressShow = false"
					@close="addressShow = false"
					:address-data="addressData"
					:indexs="indexs"
					:areaId="areaId"
					:type="types"
				></address-picker>
			</view>
			<view @click="save" class="flex-center1">
				<view class="flex-center1" style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx">
					保存
				</view>
			</view>
		</view>
		<!--  -->
		<view v-if="type == 2">
			<view @click="show3 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">文化程度</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<text style="font-size: 28rpx; color: #333333">{{ userInfo.culture }}</text>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<u-picker :show="show3" :columns="columns3" @confirm="confirm3" @cancel="show3 = false"></u-picker>
			</view>
			<view @click="dateshow1 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">毕业时间</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<view style="font-size: 28rpx; color: #333333">{{ userInfo.graduationDate }}</view>
					<!-- <text>-</text> -->
					<!-- <view @click="dateshow2 = true" style="font-size: 28rpx; color: #333333">请选择</view> -->
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
				<u-datetime-picker :show="dateshow1" v-model="value1" mode="date" @confirm="dateconfirm" @cancel="dateshow1 = false"></u-datetime-picker>
				<!-- <u-datetime-picker :show="dateshow2" v-model="value2" mode="date" @cancel="dateshow2 = false"></u-datetime-picker> -->
			</view>
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">所学专业</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" v-model="userInfo.majorStudied" placeholder="请输入专业" style="font-size: 28rpx; color: #333333" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image> -->
				</view>
			</view>
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">技能证书</view>
				<view class="flex-between" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
						width="100"
						height="100"
						uploadIcon="plus"
					></u-upload>
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<view class="flex-center1">
				<view
					@click="save()"
					class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx"
				>
					保存
				</view>
			</view>
		</view>
		<!--  -->
		<view v-if="type == 3">
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">公司名称</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" v-model="workobj.companyName" placeholder="请输入专业" style="font-size: 28rpx; color: #333333" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image> -->
				</view>
			</view>
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">职位名称</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<input type="text" v-model="workobj.postName" placeholder="请输入专业" style="font-size: 28rpx; color: #333333" />
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image> -->
				</view>
			</view>
			<view @click="dateshow2 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">在职时间开始</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<view style="font-size: 28rpx; color: #333333">{{ workobj.timeStart }}</view>
					<!-- <text>-</text> -->
					<!-- <view @click="dateshow2 = true" style="font-size: 28rpx; color: #333333">请选择</view> -->
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<u-datetime-picker :show="dateshow2" v-model="value1" mode="date" @confirm="dateconfirm1" @cancel="dateshow2 = false"></u-datetime-picker>
			<view @click="dateshow3 = true" style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">在职时间结束</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<view style="font-size: 28rpx; color: #333333">{{ workobj.timeEnd }}</view>
					<!-- <text>-</text> -->
					<!-- <view @click="dateshow2 = true" style="font-size: 28rpx; color: #333333">请选择</view> -->
					<image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image>
				</view>
			</view>
			<u-datetime-picker :show="dateshow3" v-model="value1" mode="date" @confirm="dateconfirm2" @cancel="dateshow3 = false"></u-datetime-picker>
			<view style="border-bottom: 1rpx solid #eeeeee; margin-bottom: 30rpx">
				<view style="font-weight: 300; font-size: 24rpx; color: #333333">工作内容</view>
				<view class="flex-between1" style="margin-bottom: 14rpx; padding: 10rpx 0 30rpx 0">
					<textarea v-model="workobj.content" placeholder="请输入" style="box-sizing: border-box; padding: 30rpx 0; font-size: 28rpx; color: #333333"></textarea>
					<!-- <image src="@/static/mine/mineright.png" style="width: 16rpx; height: 26rpx"></image> -->
				</view>
			</view>
			<view class="flex-center1">
				<view
					@click="save()"
					class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx"
				>
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pickerAddress from '@/uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue';
export default {
	components: {
		pickerAddress
	},
	data() {
		return {
			address: '',
			addressShow: false,
			indexs: [0, 0, 0],
			areaId: [1, 110000, 110101],
			addressData: ['北京市', '北京市', '东城区'],
			types: 3, //1-省，2-省市，3-省市区
			type: '',
			fileList1: [],
			dateshow1: false,
			dateshow2: false,
			dateshow3: false,
			value1: Number(new Date()),
			show: false,
			columns: [['长期', '短期', '临时']],
			show1: false,
			columns1: [
				['3k', '4k', '5k', '6k', '7k', '8k', '9k', '10k'],
				['11k', '12k', '13k', '14k', '15k', '16k', '17k', '18k', '19k', '20k']
			],
			show2: false,
			columns2: [
				['8:30', '9:00', '9:30'],
				['18:00', '18:30', '19:30']
			],
			show3: false,
			columns3: [['初中及以下', '中专/中技', '高中', '大专', '本科以上']],
			userInfo: {},
			workobj: {
				companyName: '',
				postName: '',
				content: '',
				timeStart: '',
				timeEnd: ''
			}
		};
	},
	onLoad(option) {
		this.type = option.value;
		console.log(this.type);
	},
	methods: {
		init() {
			this.$request('front/user/userInfo').then((res) => {
				console.log(res, '个人信息');
				this.userInfo = res.obj.userInfo;
				if (this.userInfo.skills) {
					const imglist = this.userInfo.skills.split(',');
					imglist.map((item, index) => {
						this.$set(this.fileList1, index, { url: item });
					});
				}
			});
		},
		dateconfirm(value) {
			this.userInfo.graduationDate = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow1 = false;
		},
		dateconfirm1(value) {
			this.workobj.timeStart = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow2 = false;
		},
		dateconfirm2(value) {
			this.workobj.timeEnd = this.$u.timeFormat(value.value, 'yyyy-mm-dd');
			this.dateshow3 = false;
		},
		confirm(e) {
			console.log('confirm', e);
			this.userInfo.workIntention = e.value[0];
			this.show = false;
		},
		confirm1(e) {
			console.log('confirm', e);
			this.userInfo.income = e.value[0] + '-' + e.value[1];
			this.show1 = false;
		},
		confirm2(e) {
			console.log('confirm', e);
			this.userInfo.workTime = e.value[0] + '-' + e.value[1];
			this.show2 = false;
		},
		confirm3(e) {
			console.log('confirm', e);
			this.userInfo.culture = e.value[0];
			this.show3 = false;
		},
		confirmAddress(e) {
			console.log(e);
			this.userInfo.workAddress = e.value[0] + '-' + e.value[1] + '-' + e.value[2];
			this.userInfo.areaId = e.areaId[2];
			this.addressShow = false;
		},
		save() {
			if (this.type == 1) {
				this.$tools.prePage().form.workIntention = this.userInfo.workIntention;
				this.$tools.prePage().form.income = this.userInfo.income;
				this.$tools.prePage().form.workTime = this.userInfo.workTime;
				this.$tools.prePage().form.workAddress = this.userInfo.workAddress;
				this.$tools.prePage().form.areaId = this.userInfo.areaId;
				this.$tools.back();
			}
			if (this.type == 2) {
				this.$tools.prePage().form.skills = this.userInfo.skills;
				this.$tools.prePage().form.graduationDate = this.userInfo.graduationDate;
				this.$tools.prePage().form.majorStudied = this.userInfo.majorStudied;
				this.$tools.prePage().form.culture = this.userInfo.culture;
				this.$tools.back();
			}
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			this.setimg(event);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
			this.setimg(event);
		},
		setimg(event) {
			const list = [];
			this[`fileList${event.name}`].map((item, index) => {
				list.push(item.url);
			});
			this.userInfo.skills = list.join(',');
		}
	}
};
</script>

<style lang="less" scoped>
.plan {
	padding: 180rpx 32rpx;
}
</style>
